<template>
    <div v-if="state.detail" class="white-box">
        <h3 class="xq-h3">{{ state.detail.title }}</h3>
        <p class="xq-time">发布时间：{{ state.detail.created }}</p>
        <div v-html="state.detail.message" class="xq-content"></div>
    </div>
</template>

<script setup>
import { onMounted, reactive, inject } from "vue";
import { useRoute } from "vue-router";
import {
    readMessage,
    getMessageContent,
    getMessageDetail,
} from "@/apis/message";

const $message = inject("$message");

const route = useRoute();
const sid = route.query.sid;

const state = reactive({
    detail: null,
});

onMounted(async () => {
    await getDetail();
    readMessage({ sid });
});
const getDetail = async () => {
    const res = await getMessageDetail({ sid });
    if (res.data.code === 200) {
        state.detail = res.data.data;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};
</script>
